import React from 'react'
import HomeHead from './components/HomeHead'
import { HashRouter, useRoutes, Navigate } from 'react-router-dom'
import RouterView from './router'
import A from './views/A'
import B from './views/B'
import C from './views/C'
import A1 from './views/a/A1'
import A2 from './views/a/A2'
import A3 from './views/a/A3'

const App = function () {
    /* return <HashRouter>
        {/* 导航部分 *!/}
        <HomeHead />
        {/* 路由容器 *!/}
        <div className="content">
            {/* <Routes>
                <Route path='/' element={<Navigate to='/a' />} />
                <Route path='/a' element={<A />}>
                    <Route path='/a' element={<Navigate to='/a/a1' />} />
                    <Route path='/a/a1' element={<A1 />} />
                    <Route path='/a/a2' element={<A2 />} />
                    <Route path='/a/a3' element={<A3 />} />
                </Route>
                <Route path='/b' element={<B />} />
                <Route path='/c' element={<C />} />
                <Route path='*' element={<Navigate to={{
                    pathname: '/a',
                    search: '?from=404'
                }} />} />
            </Routes> *!/}
            <RouterView/>
        </div>
    </HashRouter> */
    const element = useRoutes([
        {
            path: '/',
            element: <Navigate to='/a' />
        },
        {
            path: '/a',
            element: <A />,
            children: [
                {
                    path: '/a',
                    element: <Navigate to='/a/a1' />
                },
                {
                    path: '/a/a1',
                    element: <A1 />
                },
                {
                    path: '/a/a2',
                    element: <A2 />
                },
                {
                    path: '/a/a3',
                    element: <A3 />
                }
            ]
        },
        {
            path: '/b',
            element: <B />
        },
        {
            path: '/c',
            element: <C />
        }
    ])
    return <>
        <HomeHead />
        {element}
    </>
}

export default App